<template>
  <Col
    v-if="getShow.isIfShow"
    v-show="getShow.isShow"
    v-bind="getColProps"
    class="box-border p-2"
  >
    <Form.Item v-bind="getFormItemProps" class="m-0">
      <div v-if="props?.component && props.component === 'Upload'" class="">
       
        <Upload
          class="custom-upload"
          list-type="picture-card"
          v-bind="getComponentProps"
         
        >
          <div>
           
            <img
              v-if="formState[props.dataIndex]"
              class="custom-image"
              :src="formState[props.dataIndex]"
              alt=""
              srcset=""
            />

          

            <PlusOutlined v-else class="add-btn" />
          </div>
        </Upload>
      </div>
      <component
        :is="getComponent"
        v-else-if="props?.component && isChecked.includes(props.component)"
        v-bind="getComponentProps"
        v-model:checked="formState[props.dataIndex]"
      ></component>
      <component
        :is="getComponent"
        v-else-if="props?.component && isSelect.includes(props.component)"
        v-bind="getComponentProps"
        v-model:value="formState[props.dataIndex]"
        :mode="props?.mode"
      ></component>
      <component
        :is="getComponent"
        v-else
        v-bind="getComponentProps"
        v-model:value="formState[props.dataIndex]"
      ></component>
    </Form.Item>
  </Col>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue';
import { Form, Col, Upload, Button, Image } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { SchemaFormItemProps } from './types';
import { useFormItemState } from './form-item-hooks';
import { isString, isArray, isObject } from '@multi-kit/inspect';

defineOptions({
  name: 'SchemaFormItem',
});
const props = defineProps(SchemaFormItemProps);

const {
  getFormItemProps,
  getComponent,
  getComponentProps,
  getSchemaCol,
  getColProps,
  getShow,
} = useFormItemState({
  props,
});
const { formState } = toRefs(props);

const isChecked = ['Checkbox', 'Radio', 'Switch'];
const isSelect = ['Select'];
</script>

<style lang="scss" scoped>
::v-deep(.custom-upload .ant-upload-list-picture-card-container) {
  display: none;
}
::v-deep(.custom-image) {
  width: 100px;
  height: 100px;
}
.add-btn {
  color: #666 !important;
  font-size: 28px;
}
</style>

